<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
  <title>已购房产 - 智慧康养社区</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    .purchased-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px;
    }

    .purchased-header {
      margin-bottom: 30px;
    }

    .house-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      overflow: hidden;
      margin-bottom: 25px;
    }

    .house-img {
      height: 250px;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #28a745;
      font-size: 4rem;
    }

    .house-body {
      padding: 25px;
    }

    .house-title {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 15px;
    }

    .house-location {
      font-size: 1.1rem;
      margin-bottom: 20px;
      color: #495057;
    }

    .house-details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 25px;
    }

    .detail-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #e9ecef;
    }

    .detail-label {
      color: #6c757d;
    }

    .detail-value {
      font-weight: 500;
    }

    .house-price {
      font-size: 1.5rem;
      font-weight: 700;
      color: #28a745;
      text-align: center;
      margin: 20px 0;
    }

    .btn-container {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .btn-action {
      flex: 1;
      padding: 10px;
      text-align: center;
      border-radius: 5px;
      color: white;
      text-decoration: none;
    }

    .btn-view {
      background-color: #28a745;
    }

    .btn-view:hover {
      background-color: #218838;
      color: white;
    }

    .btn-add {
      background-color: #007bff;
    }

    .btn-add:hover {
      background-color: #0069d9;
      color: white;
    }

    .empty-state {
      text-align: center;
      padding: 50px 0;
    }

    .empty-icon {
      font-size: 5rem;
      color: #e9ecef;
      margin-bottom: 20px;
    }

    .empty-title {
      font-size: 1.5rem;
      margin-bottom: 15px;
    }

    .empty-text {
      color: #6c757d;
      max-width: 500px;
      margin: 0 auto 30px;
    }
  </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="purchased-container">
  <div class="purchased-header">
    <h2>我的房产</h2>
    <p class="text-muted">管理您已购买的康养房产</p>
  </div>

  <c:if test="${not empty error}">
    <div class="alert alert-danger">${error}</div>
  </c:if>

  <c:choose>
    <c:when test="${not empty purchasedHouses}">
      <c:forEach items="${purchasedHouses}" var="house">
        <div class="house-card">
          <div class="house-img">
            <i class="bi bi-house"></i>
          </div>
          <div class="house-body">
            <h3 class="house-title">${house.houseName}</h3>
            <div class="house-location">
                ${house.buildingNumber}栋${house.unitNumber}单元${house.roomNumber}
            </div>

            <div class="house-details">
              <div class="detail-item">
                <span class="detail-label">房产面积</span>
                <span class="detail-value">${house.area} 平方米</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">购买价格</span>
                <span class="detail-value">
                  <fmt:formatNumber value="${house.price}" type="currency" currencySymbol="¥"/>
                </span>
              </div>
<%--              <div class="detail-item">
                <span class="detail-label">购买日期</span>
                <span class="detail-value">2023-10-15</span>
              </div>--%>
              <div class="detail-item">
                <span class="detail-label">入住人数</span>
                <span class="detail-value">5人</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">房产状态</span>
                <span class="detail-value">已确权</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">物业服务</span>
                <span class="detail-value">已开通</span>
              </div>
            </div>

            <div class="house-price">
              <fmt:formatNumber value="${house.price}" type="currency" currencySymbol="¥"/>
            </div>

            <div class="btn-container">
              <a href="ViewOccupantsServlet?houseId=${house.houseId}" class="btn-action btn-view">
                <i class="bi bi-people"></i> 查看入住人
              </a>
              <a href="AddOccupantServlet" class="btn-action btn-add">
                <i class="bi bi-person-plus"></i> 添加入住人
              </a>
            </div>
          </div>
        </div>
      </c:forEach>
    </c:when>
    <c:otherwise>
      <div class="empty-state">
        <div class="empty-icon">
          <i class="bi bi-house"></i>
        </div>
        <h3 class="empty-title">您尚未购买任何房产</h3>
        <p class="empty-text">
          您目前还没有购买任何康养房产，可以前往我们的房产页面查看可售房源并购买。
          每位会员限购一套房产，购买后可享受社区的优质养老服务。
        </p>
        <a href="HouseListServlet" class="btn btn-primary">浏览可售房源</a>
      </div>
    </c:otherwise>
  </c:choose>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>